<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>首页文章列表 | Megasu的笔记</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/heima2020/favicon.ico">
    <meta name="description" content="Megasu的笔记整理">
    <meta name="author" content="Megasu">
    <meta name="Keywords" content="学习网站,前端,分享">
    <link rel="preload" href="/heima2020/assets/css/0.styles.aa663799.css" as="style"><link rel="preload" href="/heima2020/assets/js/app.e2adc9d2.js" as="script"><link rel="preload" href="/heima2020/assets/js/2.7389c9d3.js" as="script"><link rel="preload" href="/heima2020/assets/js/12.3ea117b6.js" as="script"><link rel="prefetch" href="/heima2020/assets/js/10.8b750e5f.js"><link rel="prefetch" href="/heima2020/assets/js/11.9224f975.js"><link rel="prefetch" href="/heima2020/assets/js/13.7524b74f.js"><link rel="prefetch" href="/heima2020/assets/js/14.cee0fcf8.js"><link rel="prefetch" href="/heima2020/assets/js/15.7a4a27f7.js"><link rel="prefetch" href="/heima2020/assets/js/16.947d882b.js"><link rel="prefetch" href="/heima2020/assets/js/17.79d3becb.js"><link rel="prefetch" href="/heima2020/assets/js/18.48208e3a.js"><link rel="prefetch" href="/heima2020/assets/js/19.3d0c49ef.js"><link rel="prefetch" href="/heima2020/assets/js/20.1f6114c8.js"><link rel="prefetch" href="/heima2020/assets/js/21.85e67b4a.js"><link rel="prefetch" href="/heima2020/assets/js/22.ce482f4d.js"><link rel="prefetch" href="/heima2020/assets/js/23.a150bd35.js"><link rel="prefetch" href="/heima2020/assets/js/24.8cd80d5d.js"><link rel="prefetch" href="/heima2020/assets/js/25.0001c7c1.js"><link rel="prefetch" href="/heima2020/assets/js/26.aa4d65a5.js"><link rel="prefetch" href="/heima2020/assets/js/27.baffff1d.js"><link rel="prefetch" href="/heima2020/assets/js/28.20430dcf.js"><link rel="prefetch" href="/heima2020/assets/js/29.7bbc3c04.js"><link rel="prefetch" href="/heima2020/assets/js/3.0076a912.js"><link rel="prefetch" href="/heima2020/assets/js/30.5f74696f.js"><link rel="prefetch" href="/heima2020/assets/js/31.a0bf56d6.js"><link rel="prefetch" href="/heima2020/assets/js/32.dd5a93dd.js"><link rel="prefetch" href="/heima2020/assets/js/33.92de7335.js"><link rel="prefetch" href="/heima2020/assets/js/34.bf468ed6.js"><link rel="prefetch" href="/heima2020/assets/js/35.28502be1.js"><link rel="prefetch" href="/heima2020/assets/js/36.3622a14c.js"><link rel="prefetch" href="/heima2020/assets/js/37.626e17d3.js"><link rel="prefetch" href="/heima2020/assets/js/38.860020b8.js"><link rel="prefetch" href="/heima2020/assets/js/39.c092c283.js"><link rel="prefetch" href="/heima2020/assets/js/4.586af112.js"><link rel="prefetch" href="/heima2020/assets/js/40.a6ba2743.js"><link rel="prefetch" href="/heima2020/assets/js/41.43d70bcd.js"><link rel="prefetch" href="/heima2020/assets/js/42.6486a709.js"><link rel="prefetch" href="/heima2020/assets/js/43.670b256a.js"><link rel="prefetch" href="/heima2020/assets/js/44.eb371480.js"><link rel="prefetch" href="/heima2020/assets/js/45.5b45f11e.js"><link rel="prefetch" href="/heima2020/assets/js/46.bc59be94.js"><link rel="prefetch" href="/heima2020/assets/js/47.ec36fca9.js"><link rel="prefetch" href="/heima2020/assets/js/48.51e80f8f.js"><link rel="prefetch" href="/heima2020/assets/js/5.6eb7e243.js"><link rel="prefetch" href="/heima2020/assets/js/6.1b7d5a6d.js"><link rel="prefetch" href="/heima2020/assets/js/7.f611fe3c.js"><link rel="prefetch" href="/heima2020/assets/js/8.c14cc922.js"><link rel="prefetch" href="/heima2020/assets/js/9.cd5538bb.js">
    <link rel="stylesheet" href="/heima2020/assets/css/0.styles.aa663799.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/heima2020/" class="home-link router-link-active"><!----> <span class="site-name">Megasu的笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/heima2020/node/day01" class="sidebar-heading clickable open"><span>Node</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/heima2020/node/day01.html" class="sidebar-link">Node 第 1 天</a></li><li><a href="/heima2020/node/day02.html" class="sidebar-link">Node 第 2 天</a></li><li><a href="/heima2020/node/day03.html" class="sidebar-link">Node 第 3 天</a></li><li><a href="/heima2020/node/day04.html" class="sidebar-link">Node 第 4 天</a></li><li><a href="/heima2020/node/day05.html" class="sidebar-link">Node 第 5 天</a></li><li><a href="/heima2020/node/day06.html" class="sidebar-link">Node 第 6 天</a></li><li><a href="/heima2020/node/day07.html" class="sidebar-link">Node 第 7 天</a></li><li><a href="/heima2020/node/day08.html" class="sidebar-link">Node 第 8 天</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="首页文章列表"><a href="#首页文章列表" class="header-anchor">#</a> 首页文章列表</h2> <img src="/heima2020/assets/img/001 - 首页文章列表.99e9e8f8.png" style="zoom:67%;"> <h3 id="_1-页面布局"><a href="#_1-页面布局" class="header-anchor">#</a> 1.  页面布局</h3> <h4 id="_1-1-头部导航栏"><a href="#_1-1-头部导航栏" class="header-anchor">#</a> 1.1  头部导航栏</h4> <blockquote><p>使用 <code>Vant</code> 提供的 <a href="https://youzan.github.io/vant/#/zh-CN/nav-bar" target="_blank" rel="noopener noreferrer">NavBar 导航栏<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 组件，同时在 <a href="https://youzan.github.io/vant/#/zh-CN/nav-bar" target="_blank" rel="noopener noreferrer">NavBar 导航栏<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 组件标签中使用 <a href="https://youzan.github.io/vant/#/zh-CN/button" target="_blank" rel="noopener noreferrer">Button 按钮<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 组件，最后进行样式调整即可</p></blockquote> <ol><li><p>使用导航栏组件</p></li> <li><p>在导航栏组件中插入按钮</p> <ul><li>文本</li> <li>图标</li></ul></li> <li><p>样式调整</p> <ul><li>宽高</li> <li>背景色</li> <li>边框</li> <li>文本大小</li> <li>图标大小</li></ul></li></ol> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 顶部导航栏组件 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-nav-bar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>page-nav-bar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>small<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>搜索<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-nav-bar</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'HomeIndex'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.home-container</span> <span class="token punctuation">{</span>
  <span class="token selector">/deep/ .van-nav-bar__title</span> <span class="token punctuation">{</span>
    <span class="token property">max-width</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.search-btn</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 555px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 64px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #5babfb<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 28px<span class="token selector">;
    .van-icon</span> <span class="token punctuation">{</span>
      <span class="token property">font-size</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><hr> <h3 id="_2-处理文章频道列表"><a href="#_2-处理文章频道列表" class="header-anchor">#</a> 2. 处理文章频道列表</h3> <img src="/heima2020/assets/img/002 - 频道列表.09eb6a6f.png" style="zoom:67%;"> <h4 id="_2-1-使用-tab-标签页组件"><a href="#_2-1-使用-tab-标签页组件" class="header-anchor">#</a> 2.1 使用 Tab 标签页组件</h4> <blockquote><p>使用 <code>Vant</code> 提供的 <a href="https://youzan.github.io/vant/#/zh-CN/tab" target="_blank" rel="noopener noreferrer">Tab 标签页组件<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 实现区域的开发</p></blockquote> <ol><li>分析 <a href="https://youzan.github.io/vant/#/zh-CN/tab" target="_blank" rel="noopener noreferrer">Tab 标签页组件<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 的滑动切换使用方式，并应用到页面中</li></ol> <ul><li>通过 <code>v-model</code> 绑定当前激活标签对应的索引值，默认情况下启用第一个标签</li> <li>通过 <code>animated</code> 属性可以开启切换标签内容时的转场动画</li> <li>通过 <code>swipeable</code> 属性可以开启滑动切换标签页</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 频道列表 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabs</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span> <span class="token attr-name">swipeable</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabs</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'HomeIndex'</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      active<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>给组件添加 <code>animated</code>属性，开启切换标签内容时的转场动画</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 频道列表 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabs</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span> <span class="token attr-name">swipeable</span> <span class="token attr-name">animated</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 略 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabs</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="_2-2-基础样式调整"><a href="#_2-2-基础样式调整" class="header-anchor">#</a> 2.2 基础样式调整</h4> <ol><li>基础样式调整</li></ol> <ul><li>标签项
<ul><li>右边框</li> <li>下边框</li> <li>宽高</li> <li>文字大小</li> <li>文字颜色</li></ul></li> <li>底部条
<ul><li>宽高</li> <li>颜色</li> <li>位置</li></ul></li></ul> <ol start="2"><li><p>添加类名</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabs</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel-tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span> <span class="token attr-name">swipeable</span> <span class="token attr-name">animated</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 略 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabs</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>样式调整</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">/deep/ .channel-tabs</span> <span class="token punctuation">{</span>
  <span class="token selector">.van-tabs__wrap</span> <span class="token punctuation">{</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 82px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.van-tab</span> <span class="token punctuation">{</span>
    <span class="token property">min-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">border-right</span><span class="token punctuation">:</span> 1px solid #edeff3<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #777777<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.van-tab--active</span> <span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #333333<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.van-tabs__nav</span> <span class="token punctuation">{</span>
    <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.van-tabs__line</span> <span class="token punctuation">{</span>
    <span class="token property">bottom</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 31px <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #3296fa<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h4 id="_2-3-处理汉堡按钮"><a href="#_2-3-处理汉堡按钮" class="header-anchor">#</a> 2.3 处理汉堡按钮</h4> <ol><li>汉堡菜单样式调整</li></ol> <ul><li><p>使用插槽插入内容</p></li> <li><p>样式调整</p> <ul><li>定位</li> <li>内容居中</li> <li>宽高</li> <li>背景色、透明度</li> <li>字体图标大小</li></ul></li> <li><p>使用伪元素设置渐变边框</p> <ul><li>定位</li> <li>宽高</li> <li>背景图</li> <li>背景图填充模式</li></ul></li></ul> <ol start="2"><li>使用插槽插入内容</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 频道列表 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabs</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel-tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span> <span class="token attr-name">swipeable</span> <span class="token attr-name">animated</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>

  <span class="token comment">&lt;!-- 汉堡按钮 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hamburger-btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toutiao toutiao-gengduo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabs</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="3"><li><p>样式调整</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">.hamburger-btn</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 66px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 82px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.902<span class="token punctuation">;</span>

  <span class="token selector">i.toutiao</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 33px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>使用伪元素设置渐变边框</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">.hamburger-btn</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 66px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 82px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.902<span class="token punctuation">;</span>

  <span class="token selector">i.toutiao</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 33px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">&amp;:before</span> <span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>~@/assets/gradient-gray-line.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
    <span class="token property">background-size</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>添加占位符充当内容区域，解决最后一个标签被覆盖遮挡的问题</p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 频道列表 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabs</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel-tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span> <span class="token attr-name">swipeable</span> <span class="token attr-name">animated</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>标签 6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>内容 6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>

  <span class="token comment">&lt;!-- 汉堡按钮 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>placeholder<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hamburger-btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toutiao toutiao-gengduo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabs</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">.placeholder</span> <span class="token punctuation">{</span>
  <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 66px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 82px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="6"><li>完整代码</li></ol> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">.placeholder</span> <span class="token punctuation">{</span>
  <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 66px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 82px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.hamburger-btn</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 66px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 82px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.902<span class="token punctuation">;</span>

  <span class="token selector">i.toutiao</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 33px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">&amp;:before</span> <span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>~@/assets/gradient-gray-line.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
    <span class="token property">background-size</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h3 id="_3-展示频道列表"><a href="#_3-展示频道列表" class="header-anchor">#</a> 3. 展示频道列表</h3> <h4 id="_3-1-实现思路"><a href="#_3-1-实现思路" class="header-anchor">#</a> 3.1  实现思路</h4> <ol><li>找数据接口</li> <li>把接口封装为请求方法</li> <li>在组件中请求获取数据</li> <li>模板绑定</li></ol> <h4 id="_3-2-实现步骤"><a href="#_3-2-实现步骤" class="header-anchor">#</a> 3.2 实现步骤</h4> <ol><li><p>在 <code>src\api\user.js</code> 中封装数据请求接口</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 获取用户自己的信息</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getUserChannels</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    method<span class="token operator">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span>
    url<span class="token operator">:</span> <span class="token string">'/app/v1_0/user/channels'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>在 <code>src\views\home\index.vue</code> 导入封装的 <code>getUserChannels</code> 方法</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getUserChannels <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/user'</span>
</code></pre></div></li> <li><p>调用<code>getUserChannels</code>  方法获取到频道列表的数据</p></li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'HomeIndex'</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      active<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
      channels<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 频道列表</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">loadChannels</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token keyword">async</span> <span class="token function">loadChannels</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getUserChannels</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>channels <span class="token operator">=</span> data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>channels
      <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$toast</span><span class="token punctuation">(</span><span class="token string">'获取频道数据失败'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="4"><li>模板绑定，渲染请求回来的数据</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 频道列表 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabs</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel-tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span> <span class="token attr-name">swipeable</span> <span class="token attr-name">animated</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel.name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel in channels<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel.id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ channel.name }}的内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>

  <span class="token comment">&lt;!-- 汉堡按钮 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>placeholder<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hamburger-btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toutiao toutiao-gengduo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabs</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_4-展示文章列表"><a href="#_4-展示文章列表" class="header-anchor">#</a> 4. 展示文章列表</h3> <img src="/heima2020/assets/img/003 - 文章列表.60edd9dc.png" style="zoom:67%;"> <h4 id="_4-1-思路分析"><a href="#_4-1-思路分析" class="header-anchor">#</a> 4.1 思路分析</h4> <h5 id="_4-1-1-实现思路"><a href="#_4-1-1-实现思路" class="header-anchor">#</a> 4.1.1 实现思路</h5> <p>你的思路可能是这样的：</p> <p>1、找到数据接口</p> <p>2、封装请求方法</p> <p>3、在组件中请求获取数据，将数据存储到 data 中</p> <p>4、模板绑定展示</p> <p>根据不同的频道加载不同的文章列表，你的思路可能是这样的：</p> <ul><li>有一个 <code>list</code> 数组，用来存储文章列表</li> <li>查看 <code>a</code> 频道：请求获取数据，让 <code>list = a</code> 频道文章</li> <li>查看 <code>b</code> 频道：请求获取数据，让 <code>list = b</code> 频道文章</li> <li>查看 <code>c</code> 频道：请求获取数据，让 <code>list = c</code> 频道文章</li> <li>...</li></ul> <img src="/heima2020/assets/img/004 - 文章列表.61357dfb.png" alt="image-20200111124415227" style="zoom:60%;"> <p>思路没有问题，但是并不是我们想要的效果。</p> <p>我们想要的效果是：<strong>加载过的数据列表不要重新加载</strong>。</p> <div class="language-js extra-class"><pre class="language-js"><code>list<span class="token operator">:</span> <span class="token punctuation">[</span>
    a<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    b<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">]</span>
</code></pre></div><p>实现思路也非常简单，就是我们准备<strong>多个 list 数组，每个频道对应一个，查看哪个频道就把数据往哪个频道的列表数组中存放，这样的话就不会导致覆盖问题</strong>。</p> <img src="/heima2020/assets/img/005 - 文章列表.a8d6d6f0.png" alt="image-20200111124530323" style="zoom:60%;"> <p>可是有多少频道就得有多少频道文章数组，我们都一个一个声明的话会非常麻烦，所以这里的建议是利用组件来处理。</p> <p>具体做法就是：</p> <ul><li>封装一个文章列表组件</li> <li>然后在频道列表中把文章列表遍历出来</li></ul> <p><strong>因为文章列表组件中请求获取文章列表数据需要频道 id，所以 频道 id 应该作为 props 参数传递给文章列表组件，为了方便，我们直接把频道对象传递给文章列表组件就可以了。</strong></p> <img src="/heima2020/assets/img/image-20200306155328108.198f1334.png" style="zoom:67%;"> <p>在文章列表中请求获取对应的列表数据，展示到列表中。</p> <p>最后把组件在频道列表中遍历出来，就像下面这样。</p> <img src="/heima2020/assets/img/image-20200306154805522.59e24b54.png" style="zoom:67%;"> <h5 id="_4-1-2-实现步骤"><a href="#_4-1-2-实现步骤" class="header-anchor">#</a> 4.1.2 实现步骤</h5> <ol><li><p>创建 <code>src/views/home/components/article-list.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>文章列表<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ArticleList'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div></li> <li><p>在 <code>home/index.vue</code> 中注册并使用 <code>article-list.vue</code> 组件</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 顶部导航栏组件 --&gt;</span>
    <span class="token comment">&lt;!-- 代码略 --&gt;</span>

    <span class="token comment">&lt;!-- 频道列表 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabs</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel-tabs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span> <span class="token attr-name">swipeable</span> <span class="token attr-name">animated</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tab</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel.name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel in channels<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel.id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

        <span class="token comment">&lt;!-- 文章列表 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article-list</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article-list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:channel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tab</span><span class="token punctuation">&gt;</span></span>

      <span class="token comment">&lt;!-- 汉堡按钮 --&gt;</span>
      <span class="token comment">&lt;!-- 代码略 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabs</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> getUserChannels <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/user'</span>
<span class="token keyword">import</span> ArticleList <span class="token keyword">from</span> <span class="token string">'./components/article-list'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'HomeIndex'</span><span class="token punctuation">,</span>
  components<span class="token operator">:</span> <span class="token punctuation">{</span>
    ArticleList
  <span class="token punctuation">}</span>
  <span class="token comment">// 其他节点略</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>


</code></pre></div></li> <li><p>在 <code>article-list.vue</code> 组件内部使用 <code>props</code> 接收到父组件传递的数据</p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>文章列表<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ArticleList'</span><span class="token punctuation">,</span>
  props<span class="token operator">:</span> <span class="token punctuation">{</span>
    channel<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> Object<span class="token punctuation">,</span>
      required<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><ol start="4"><li><p>测试代码是否完成</p></li> <li><p><strong>答疑</strong>：</p> <ul><li>为什么标签内容是懒渲染的？
<ul><li>因为这是 Tab 标签页组件本身支持的默认功能，如果不需要可以通过配置 <code>:lazy-render=&quot;false&quot;</code> 来关闭这个效果。</li></ul></li></ul></li></ol> <hr> <h4 id="_4-2-使用-list-列表组件"><a href="#_4-2-使用-list-列表组件" class="header-anchor">#</a> 4.2   使用 List 列表组件</h4> <blockquote><p>使用 <code>Vant</code> 组件的<a href="https://youzan.github.io/vant/#/zh-CN/list" target="_blank" rel="noopener noreferrer">List 列表组件<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 完成页面的渲染工作</p></blockquote> <h5 id="_4-2-1-list-列表组件介绍"><a href="#_4-2-1-list-列表组件介绍" class="header-anchor">#</a> 4.2.1  <code>List</code> 列表组件介绍</h5> <p><a href="https://youzan.github.io/vant/#/zh-CN/list" target="_blank" rel="noopener noreferrer">List 列表组件<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>：瀑布流滚动加载，用于展示长列表。</p> <ol><li><code>List</code> 组件通过 <code>loading</code> 和 <code>finished</code> 两个变量控制加载状态</li> <li>当组件初始化或滚动到到底部时，会触发 load 事件并将 <code>loading</code> 设置成 <code>true</code>，此时可以发起异步操作并更新数据，数据更新完毕后，将 <code>loading</code> 设置成 <code>false</code> 即可，若数据已全部加载完毕，则直接将 <code>finished</code> 设置成 <code>true</code> 即可。</li> <li><code>load</code> 事件
<ul><li>List 初始化后会触发一次 load 事件，用于加载第一屏的数据。</li> <li>如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。</li></ul></li> <li><code>loading 属性</code>：控制加载中的 loading 状态
<ul><li>非加载中，loading 为 false，此时会根据列表滚动位置判断是否触发 load 事件（列表内容不足一屏幕时，会直接触发）</li> <li>加载中，loading 为 true，表示正在发送异步请求，此时不会触发 load 事件</li></ul></li> <li><code>finished 属性</code>：控制加载结束的状态
<ul><li>在每次请求完毕后，需要手动将 finished 设置为 false，表示本次加载结束</li> <li>所有数据加载结束，finished 为 true，此时不会触发 load 事件</li></ul></li></ol> <h5 id="_4-2-2-使用-list-组件列表"><a href="#_4-2-2-使用-list-组件列表" class="header-anchor">#</a> 4.2.2 使用 <code>List</code> 组件列表</h5> <ol><li><p>初步使用 <code>List</code> 组件，并分析属性的含义</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-list</span>
      <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:finished</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>finished<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">finished-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>没有更多了<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@load</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onLoad<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-list</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ArticleList'</span><span class="token punctuation">,</span>
  props<span class="token operator">:</span> <span class="token punctuation">{</span>
    channel<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> Object<span class="token punctuation">,</span>
      required<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      list<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 存储列表数据的数组</span>
      loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 控制加载中 loading 状态</span>
      finished<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 控制数据加载结束的状态</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 初始化或滚动到底部的时候会触发调用 onLoad</span>
    <span class="token function">onLoad</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onLoad'</span><span class="token punctuation">)</span>
      <span class="token comment">// 1. 请求获取数据</span>
      <span class="token comment">// setTimeout 仅做示例，真实场景中一般为 ajax 请求</span>
      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 2. 把请求结果数据放到 list 数组中</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// 0 + 1 = 1</span>
          <span class="token comment">// 1 + 1 = 2</span>
          <span class="token comment">// 2 + 1 = 3</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span>length <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>

        <span class="token comment">// 3. 本次数据加载结束之后要把加载状态设置为结束</span>
        <span class="token comment">//     loading 关闭以后才能触发下一次的加载更多</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">false</span>

        <span class="token comment">// 4. 判断数据是否全部加载完成</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span>length <span class="token operator">&gt;=</span> <span class="token number">40</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// 如果没有数据了，把 finished 设置为 true，之后不再触发加载更多</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>finished <span class="token operator">=</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div></li> <li><p>加载到底部以后数据提示可能看不到，需要在 <code>src\views\home\index.vue</code> 设置 <code>home-container</code> 样式进行设置</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">.home-container</span> <span class="token punctuation">{</span>
  <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <hr> <h4 id="_4-3-加载文章列表数据"><a href="#_4-3-加载文章列表数据" class="header-anchor">#</a> 4.3.  加载文章列表数据</h4> <h5 id="_4-3-1-实现思路"><a href="#_4-3-1-实现思路" class="header-anchor">#</a> 4.3.1 实现思路</h5> <ol><li>实现思路
<ul><li>找到数据接口</li> <li>封装请求方法</li> <li>请求获取数据</li> <li>模板绑定</li></ul></li></ol> <h5 id="_4-3-2-实现步骤"><a href="#_4-3-2-实现步骤" class="header-anchor">#</a> 4.3.2 实现步骤</h5> <blockquote><p>注意：使用接口文档中最下面的 <strong>频道新闻推荐 <code>/V1_1</code></strong></p></blockquote> <ol><li>创建 <code>src/api/article.js</code> 封装获取文章列表数据的接口 <code>getArticles</code></li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
 * 文章接口模块
 */</span>

<span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">'@/utils/request'</span>

<span class="token comment">// 获取频道的文章列表</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getArticles</span> <span class="token operator">=</span> <span class="token parameter">params</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    method<span class="token operator">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span>
    url<span class="token operator">:</span> <span class="token string">'/app/v1_1/articles'</span><span class="token punctuation">,</span>
    params
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li><p>在 <code>article-list.vue</code> 中导入 <code>getArticles</code> 方法</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getArticles <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/article'</span>
</code></pre></div></li> <li><p>在 <code>onload</code> 方法使用 <code>getArticles</code> 方法</p> <ul><li>往方法中传入即可文档需要的参数</li> <li>获取到文章列表的数据</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>methods<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token comment">// 当触发上拉加载更多的时候调用该函数</span>
  <span class="token keyword">async</span> <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getArticles</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        channel_id<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>channel<span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token comment">// 频道 id</span>
        timestamp<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>timestamp <span class="token operator">||</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳</span>
        with_top<span class="token operator">:</span> <span class="token number">1</span> <span class="token comment">// 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>

      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h5 id="_4-3-3-处理响应数据"><a href="#_4-3-3-处理响应数据" class="header-anchor">#</a> 4.3.3 处理响应数据</h5> <ol><li>处理响应的数据结果</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    list<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 文章列表数据</span>
    loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 上拉加载更多的 loading 状态</span>
    finished<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否加载结束</span>
    error<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否加载失败</span>
    timestamp<span class="token operator">:</span> <span class="token keyword">null</span> <span class="token comment">// 请求下一页数据的时间戳</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 当触发上拉加载更多的时候调用该函数</span>
    <span class="token keyword">async</span> <span class="token function">onLoad</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token comment">// 1. 请求获取数据</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getArticles</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          channel_id<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>channel<span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token comment">// 频道 id</span>
          timestamp<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>timestamp <span class="token operator">||</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳</span>
          with_top<span class="token operator">:</span> <span class="token number">1</span> <span class="token comment">// 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>

        <span class="token comment">// 2. 把数据添加到 list 数组中</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> results <span class="token punctuation">}</span> <span class="token operator">=</span> data<span class="token punctuation">.</span>data
        <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span>results<span class="token punctuation">)</span>

        <span class="token comment">// 3. 设置本次加载中 loading 状态结束</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">false</span>

        <span class="token comment">// 4. 判断数据是否加载结束</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>results<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// 更新获取下一页数据的时间戳</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>timestamp <span class="token operator">=</span> data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>pre_timestamp
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
          <span class="token comment">// 没有数据了，设置加载状态结束，不再触发上拉加载更多了</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>finished <span class="token operator">=</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li><p>渲染页面</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-list</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:finished</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>finished<span class="token punctuation">&quot;</span></span> <span class="token attr-name">finished-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>没有更多了<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@load</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onLoad<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(article, index) in list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article.title<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-list</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>返回页面查看渲染结果</p></li></ol> <h5 id="_4-4-4-错误结果的处理"><a href="#_4-4-4-错误结果的处理" class="header-anchor">#</a> 4.4.4 错误结果的处理</h5> <blockquote><p>错误处理的提示参考 <a href="https://youzan.github.io/vant/#/zh-CN/list" target="_blank" rel="noopener noreferrer">List 列表<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 组件错误提示用法</p></blockquote> <ol><li>若列表数据加载失败，将<code>error</code>设置成<code>true</code>即可显示错误提示，用户点击错误提示后会重新触发 load 事件</li></ol> <ul><li>给 <code>List</code> 组件添加 <code>error.sync</code> 属性，表示是否加载失败</li> <li>给 <code>List</code> 组件添加 <code>error-text</code> 属性，代表加载失败后的提示文案</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-list</span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:finished</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>finished<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">finished-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>没有更多了<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:error.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>error<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">error-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请求失败，点击重新加载<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@load</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onLoad<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(article, index) in list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article.title<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-list</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="2"><li><p>在 <code>data</code> 中声明 <code>error</code> 属性</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    list<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 存储列表数据的数组</span>
    loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 控制加载中 loading 状态</span>
    finished<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 控制数据加载结束的状态</span>
    error<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 控制列表加载失败的提示状态</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>在请求错误以后将 <code>error</code> 设置为 <code>true</code> 开启提示，同时将 <code>loading</code> 也进行关闭</p> <div class="language-js extra-class"><pre class="language-js"><code>methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 当触发上拉加载更多的时候调用该函数</span>
    <span class="token keyword">async</span> <span class="token function">onLoad</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">try</span> <span class="token punctuation">{</span>
          
        <span class="token comment">// 请求成功的逻辑略……</span>
        
      <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token comment">// 关闭 loading 效果</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>error <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token comment">// 开启错误提示</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <hr> <h4 id="_4-4-下拉刷新"><a href="#_4-4-下拉刷新" class="header-anchor">#</a> 4.4.  下拉刷新</h4> <blockquote><p>这里主要使用到 <code>Vant</code> 中的 <a href="https://youzan.github.io/vant/#/zh-CN/pull-refresh" target="_blank" rel="noopener noreferrer">PullRefresh 下拉刷新<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 组件</p></blockquote> <img src="/heima2020/assets/img/006 - 展示文章列表-下拉刷新.9ffd7337.gif" style="zoom:70%;"> <h5 id="_4-4-1-实现思路"><a href="#_4-4-1-实现思路" class="header-anchor">#</a> 4.4.1 实现思路</h5> <ol><li>注册下拉刷新事件（组件）的处理函数</li> <li>发送请求获取文章列表数据</li> <li>把获取到的数据添加到当前频道的文章列表的顶部</li> <li>提示用户刷新成功</li></ol> <h5 id="_4-4-2-实现步骤"><a href="#_4-4-2-实现步骤" class="header-anchor">#</a> 4.4.2 实现步骤</h5> <ol><li>使用 <code>PullRefresh 下拉刷新</code> 组件将需要下拉刷新的组件进行包裹</li></ol> <ul><li>复制 <code>PullRefresh 下拉刷新</code> 组件标签，在 <code>src\views\home\components\article-list.vue</code> 组件中对 <code>van-list</code> 包裹</li> <li>声明组件标签中需要的属性 <code>v-model</code> 和 <code>refresh</code> 事件</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-pull-refresh</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isreFreshLoading<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@refresh</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onRefresh<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-list</span>
    <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:finished</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>finished<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">finished-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>没有更多了<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:error.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>error<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">error-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请求失败，点击重新加载<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">@load</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onLoad<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(article, index) in list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article.title<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-list</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-pull-refresh</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    isreFreshLoading<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 控制下拉刷新的 loading 状态</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>methods<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token comment">// 当下拉刷新的时候会触发调用该函数</span>
  <span class="token function">onRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onRefresh'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li><p>在 <code>refresh</code> 事件中，发起请求，获取下拉刷新的数据，同时下拉刷新的 <code>loading</code> 状态</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 当下拉刷新的时候会触发调用该函数</span>
<span class="token keyword">async</span> <span class="token function">onRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    <span class="token comment">// 请求获取数据</span>
    <span class="token comment">// 1. 请求获取数据</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getArticles</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      channel_id<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>channel<span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token comment">// 频道 id</span>
      timestamp<span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 下拉刷新，每次请求获取最新数据，所以传递当前最新时间戳</span>
      with_top<span class="token operator">:</span> <span class="token number">1</span> <span class="token comment">// 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token comment">// 2. 将数据追加到列表的顶部</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> results <span class="token punctuation">}</span> <span class="token operator">=</span> data<span class="token punctuation">.</span>data
    <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token operator">...</span>results<span class="token punctuation">)</span>

    <span class="token comment">// 3. 关闭下拉刷新的 loading 状态</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>isreFreshLoading <span class="token operator">=</span> <span class="token boolean">false</span>

  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>isreFreshLoading <span class="token operator">=</span> <span class="token boolean">false</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>对下拉刷新细节进行优化，添加成功提示属性 <code>success-text</code>，以及刷新成功提示展示时长属性 <code>success-duration</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-pull-refresh</span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isreFreshLoading<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@refresh</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onRefresh<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:success-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>refreshSuccessText<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:success-duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1500<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 略 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-pull-refresh</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    refreshSuccessText<span class="token operator">:</span> <span class="token string">'刷新成功'</span> <span class="token comment">// 下拉刷新成功提示文本</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">async</span> <span class="token function">onRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    <span class="token comment">// 请求获取数据</span>
    <span class="token comment">// 1. 请求获取数据</span>
	<span class="token comment">// 略……</span>
    <span class="token comment">// 2. 将数据追加到列表的顶部</span>
	<span class="token comment">// 略……</span>
    <span class="token comment">// 3. 关闭下拉刷新的 loading 状态</span>
	<span class="token comment">// 略……</span>
      
    <span class="token comment">// 更新下拉刷新成功提示的文本</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>refreshSuccessText <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">刷新成功，更新了</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>results<span class="token punctuation">.</span>length<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">条数据</span><span class="token template-punctuation string">`</span></span>

  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>refreshSuccessText <span class="token operator">=</span> <span class="token string">'刷新失败'</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>isreFreshLoading <span class="token operator">=</span> <span class="token boolean">false</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_5-优化文章列表"><a href="#_5-优化文章列表" class="header-anchor">#</a> 5.  优化文章列表</h3> <h4 id="_5-1-固定头部和频道列表"><a href="#_5-1-固定头部和频道列表" class="header-anchor">#</a> 5.1   固定头部和频道列表</h4> <ol><li><p>在 <code>src\views\home\index.vue</code> 中，给 <code>van-nav-bar</code> 导航栏添加 <code>fixed</code> 属性，实现导航栏固定</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 顶部导航栏组件 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-nav-bar</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>page-nav-bar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fixed</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>small<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>搜索<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-nav-bar</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>导航栏固定以后，发现 <code>Tab</code> 标签栏被覆盖，使用样式进行调整</p></li></ol> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">/deep/ .channel-tabs</span> <span class="token punctuation">{</span>
  <span class="token selector">.van-tabs__wrap</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 92px<span class="token punctuation">;</span>
    <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 82px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li><code>Tab</code> 标签栏被覆盖问题解决以后，发现列表前两个被遮盖，给 <code>home-container</code> 添加样式进行调整</li></ol> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">.home-container</span> <span class="token punctuation">{</span>
  <span class="token property">padding-top</span><span class="token punctuation">:</span> 174px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_5-2-记住列表的滚动位置"><a href="#_5-2-记住列表的滚动位置" class="header-anchor">#</a> 5.2 记住列表的滚动位置</h4> <h5 id="_5-2-1-思路分析"><a href="#_5-2-1-思路分析" class="header-anchor">#</a> 5.2.1 思路分析</h5> <ol><li>为什么列表滚动会相互影响 ？</li></ol> <ul><li>因为他们并不是再自己内部滚动，而是整个 <code>body</code> 页面在滚动，无论你是在 <code>a</code> 频道还是在 <code>b</code> 频道，其实滚动的都是 <code>body</code> 元素</li></ul> <ol start="2"><li><p>如何快速找到是哪个元素产生的滚动</p> <ul><li>使用下面的代码粘贴到调试工具中运行一下，然后滚动页面，就可以看到是哪个元素产生的滚动了</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">findscroller</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  element<span class="token punctuation">.</span><span class="token function-variable function">onscroll</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>element<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>findscroller<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">findscroller</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span>
</code></pre></div></li></ol> <h5 id="_5-2-2-怎么记住列表的滚动位置"><a href="#_5-2-2-怎么记住列表的滚动位置" class="header-anchor">#</a> 5.2.2  怎么记住列表的滚动位置</h5> <ol><li><p>让每一个标签内容文章列表产生自己的滚动容器，这样就不会相互影响了</p></li> <li><p>如何让标签内容文章列表产生自己的滚动容器？</p> <ul><li>固定高度： <code>height: xxx;</code></li> <li>溢出滚动：<code>overflow-y: auto;</code></li></ul></li> <li><p>我们给文章列表组件的根节点样式设置如下，</p> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">&lt;style scoped lang=&quot;less&quot;&gt;
.article-list</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">overflow-y</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>style&gt;
</code></pre></div></li> <li><p>但是发现设置高 <code>100%</code> 的话没有作用，这是为什么？</p> <ul><li>因为百分比是相对于父元素，而我们通过审查元素发现它所有的父元素都没有高</li> <li>那肯定没有作用了</li></ul></li> <li><p><code>css3</code> 中新增了一种视口单位 <code>vw</code> 和 <code>vh</code> ，何谓视口，就是根据你浏览器窗口的大小的单位，不受父元素的影响</p></li></ol> <ul><li><strong>在移动端，视口单位相对于布局视口</strong></li> <li><code>1vw</code> = 可视窗口宽度的百分之一，比如窗口宽度是 <code>750</code>，则 <code>1vw</code> = <code>7.5px</code></li> <li><code>1vh</code> = 可视窗口高度的百分之一，比如窗口宽度是 <code>667</code>，则 <code>1vw</code> =  <code>6.67px</code></li> <li>使用它唯一需要注意的就是它的兼容性：
<ul><li>在 <code>PC</code> 端已兼容到 <code>IE6</code></li> <li>在移动端 <code>IOS8</code> 以上以及 <code>Android 4.4</code>以上获得支持，并且在微信 <code>x5</code> 内核中也得到了完美的全面支持</li> <li><code>Vue</code>本身就已经兼容到 <code>IE9</code>，所以可以使用这个视口单位</li></ul></li></ul> <div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">&lt;style scoped lang=&quot;less&quot;&gt;
.article-list</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 79vh<span class="token punctuation">;</span>
  <span class="token property">overflow-y</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>style&gt;
</code></pre></div><hr> <h3 id="_6-文章列表项"><a href="#_6-文章列表项" class="header-anchor">#</a> 6. 文章列表项</h3> <h4 id="_6-1-准备组件"><a href="#_6-1-准备组件" class="header-anchor">#</a> 6.1 准备组件</h4> <ol><li><p>在我们项目中有好几个页面中都有这个文章列表项内容，如果我们在每个页面中都写一次的话不仅效率低而且维护起来也麻烦。
所以最好的办法就是我们把它封装为一个组件，然后在需要使用的组件中加载使用即可</p></li> <li><p>创建 <code>src/components/article-item/index.vue</code> 组件</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>文章列表项<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ArticleItem'</span><span class="token punctuation">,</span>
  props<span class="token operator">:</span> <span class="token punctuation">{</span>
    article<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> Object<span class="token punctuation">,</span>
      required<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div></li> <li><p>在文章列表组件中注册使用文章列表项组件</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getArticles <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/article'</span>
<span class="token keyword">import</span> ArticleItem <span class="token keyword">from</span> <span class="token string">'@/components/article-item'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ArticleList'</span><span class="token punctuation">,</span>
  components<span class="token operator">:</span> <span class="token punctuation">{</span>
    ArticleItem
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-list</span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:finished</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>finished<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">finished-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>没有更多了<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:error.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>error<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">error-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请求失败，点击重新加载<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@load</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onLoad<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article-item</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(article, index) in list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:article</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-list</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <p>2、</p> <img src="assets/image-20200404224728524.png" alt="image-20200404224728524" style="zoom:50%;"> <h4 id="_6-2-展示列表项内容"><a href="#_6-2-展示列表项内容" class="header-anchor">#</a> 6.2 展示列表项内容</h4> <blockquote><p>使用 <code>Vant</code> 提供的 <a href="https://youzan.github.io/vant/#/zh-CN/cell" target="_blank" rel="noopener noreferrer">Cell 单元格组件<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 完成列表项内容的开发，展示标题以及底部信息</p></blockquote> <ol><li>使用 <code>cell</code> 单元格组件以及 <code>image</code> 组件完成页面功能的开发</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ article.title }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article.cover.type === 3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(img, index) in article.cover.images<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-image</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ article.aut_name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ article.comm_count }}评论<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ article.pubdate }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-image</span>
        <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article.cover.type === 1<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>default<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article.cover.images[0]<span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ArticleItem'</span><span class="token punctuation">,</span>
  props<span class="token operator">:</span> <span class="token punctuation">{</span>
    article<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> Object<span class="token punctuation">,</span>
      required<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><h4 id="_6-3-样式调整"><a href="#_6-3-样式调整" class="header-anchor">#</a> 6.3 样式调整</h4> <ol><li>文章标题
<ul><li>字号</li> <li>颜色</li> <li>多行文字省略</li></ul></li> <li>单图封面
<ul><li>封面容器
<ul><li>去除 flex: 1，固定宽高</li> <li>左内边距</li></ul></li> <li>封面图
<ul><li>宽高</li> <li>填充模式：cover</li></ul></li></ul></li> <li>底部文本信息
<ul><li>字号</li> <li>颜色</li> <li>间距</li></ul></li> <li>多图封面</li></ol> <ul><li>外层容器
<ul><li>flex 容器</li> <li>上下外边距</li></ul></li> <li>图片容器
<ul><li>平均分配容器空间：flex: 1;</li> <li>固定高度</li> <li>容器项间距</li></ul></li> <li>图片
<ul><li>宽高</li> <li>填充模式</li></ul></li></ul> <ol start="5"><li>完成列表项代码的样式布局</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title van-multi-ellipsis--l2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ article.title }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article.cover.type === 3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(img, index) in article.cover.images<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-image</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-item-img<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label-info-wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ article.aut_name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ article.comm_count }}评论<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ article.pubdate }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-image</span>
      <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article.cover.type === 1<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>default<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right-cover<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">fit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>article.cover.images[0]<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ArticleItem'</span><span class="token punctuation">,</span>
  props<span class="token operator">:</span> <span class="token punctuation">{</span>
    article<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> Object<span class="token punctuation">,</span>
      required<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.article-item</span> <span class="token punctuation">{</span>
  <span class="token selector">.title</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #3a3a3a<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.van-cell__value</span> <span class="token punctuation">{</span>
    <span class="token property">flex</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 232px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 146px<span class="token punctuation">;</span>
    <span class="token property">padding-left</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.right-cover</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 232px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 146px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.label-info-wrap span</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 22px<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #b4b4b4<span class="token punctuation">;</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.cover-wrap</span> <span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 30px 0<span class="token selector">;
    .cover-item</span> <span class="token punctuation">{</span>
      <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 146px<span class="token selector">;
      &amp;:not(:last-child)</span> <span class="token punctuation">{</span>
        <span class="token property">padding-right</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token selector">.cover-item-img</span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 146px<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><h4 id="_6-4-关于第三方图片资源403问题"><a href="#_6-4-关于第三方图片资源403问题" class="header-anchor">#</a> 6.4 关于第三方图片资源403问题</h4> <ol><li>为什么文章列表数据中的好多图片资源请求失败返回 403？</li></ol> <ul><li>这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容，而第三方平台对图片资源做了防盗链保护处理</li></ul> <ol start="2"><li><p>第三方平台怎么处理图片资源保护的？</p> <ul><li><p>服务端一般使用 <code>Referer</code> 请求头识别访问来源，然后处理资源访问</p> <img src="/heima2020/assets/img/007 - 关于第三方图片资源403问题.d73dc920.png" style="zoom:80%;"></li></ul></li> <li><p><code>Referer</code> 是什么东西？</p> <blockquote><p>扩展参考：http://www.ruanyifeng.com/blog/2019/06/http-referer.html</p> <p>注意: <code>referer</code> 实际上是 <code>referrer</code> 误拼写。参见 <a href="https://zh.wikipedia.org/wiki/HTTP_referer" target="_blank" rel="noopener noreferrer">HTTP referer on Wikipedia<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> （<code>HTTP referer</code> 在维基百科上的条目）来获取更详细的信息。</p></blockquote> <ul><li><code>Referer</code> 是 <code>HTTP</code> 请求头的一部分，当浏览器向 <code>Web</code> 服务器发送请求的时候，一般会带上 <code>Referer</code>，它包含了当前请求资源的来源页面的地址。服务端一般使用 <code>Referer</code> 请求头识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等</li></ul></li> <li><p>怎么解决</p></li></ol> <ul><li>不要发送 <code>referrer</code> ，对方服务端就不知道你从哪来的了，姑且认为是你是自己人吧</li></ul> <ol start="5"><li><p>如何设置不发送 <code>referrer</code>？</p> <ul><li>用 <code>&lt;a&gt;</code>、<code>&lt;area&gt;</code>、<code>&lt;img&gt;</code>、<code>&lt;iframe&gt;</code>、<code>&lt;script&gt;</code> 或者 <code>&lt;link&gt;</code> 元素上的 <code>referrerpolicy</code> 属性为其设置独立的请求策略，例如：</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://……<span class="token punctuation">&quot;</span></span> <span class="token attr-name">referrerPolicy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>no-referrer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>或者直接在 <code>HTMl</code> 页面头中通过 <code>meta</code> 属性全局配置：</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>referrer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>no-referrer<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div></li></ol> <h4 id="_6-5-处理相对时间"><a href="#_6-5-处理相对时间" class="header-anchor">#</a> 6.5  处理相对时间</h4> <ol><li>推荐两个第三方库：</li></ol> <ul><li><a href="https://momentjs.com/" target="_blank" rel="noopener noreferrer">Moment.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://day.js.org/" target="_blank" rel="noopener noreferrer">Day.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <p>两者都是专门用于处理时间的 <code>JavaScript</code> 库，功能差不多，因为 <code>Day.js</code> 的设计就是参考的 <code>Moment.js</code>。但是 <code>Day.js</code> 相比 <code>Moment.js</code> 的包体积要更小一些，因为它采用了插件化的处理方式。</p> <p><a href="https://day.js.org/zh-CN/" target="_blank" rel="noopener noreferrer">Day.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 是一个轻量的处理时间和日期的 JavaScript 库，和 <a href="https://momentjs.com/" target="_blank" rel="noopener noreferrer">Moment.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 的 <code>API</code> 设计保持完全一样，如果您曾经用过 <code>Moment.js</code>, 那么您已经知道如何使用 <code>Day.js</code> 。</p> <ul><li><code>Day.js</code>可以运行在浏览器和 <code>Node.js</code> 中。</li> <li>🕒 和 <code>Moment.js</code> 相同的 <code>API</code> 和用法</li> <li>💪 不可变数据 (<code>Immutable</code>)</li> <li>🔥 支持链式操作 (<code>Chainable)</code></li> <li>🌐 国际化 <code>I18n</code></li> <li>📦 仅 <code>2kb</code> 大小的微型库</li> <li>👫 全浏览器兼容</li></ul> <ol start="2"><li><p>安装</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> i dayjs
</code></pre></div></li> <li><p>创建 <code>utils/dayjs.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> dayjs <span class="token keyword">from</span> <span class="token string">'dayjs'</span>

<span class="token comment">// 加载中文语言包</span>
<span class="token keyword">import</span> <span class="token string">'dayjs/locale/zh-cn'</span>

<span class="token keyword">import</span> relativeTime <span class="token keyword">from</span> <span class="token string">'dayjs/plugin/relativeTime'</span>

<span class="token comment">// 配置使用处理相对时间的插件</span>
dayjs<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span>relativeTime<span class="token punctuation">)</span>

<span class="token comment">// 配置使用中文语言包</span>
dayjs<span class="token punctuation">.</span><span class="token function">locale</span><span class="token punctuation">(</span><span class="token string">'zh-cn'</span><span class="token punctuation">)</span>

<span class="token comment">// 全局过滤器：处理相对时间</span>
Vue<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token string">'relativeTime'</span><span class="token punctuation">,</span> <span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">dayjs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">to</span><span class="token punctuation">(</span><span class="token function">dayjs</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div></li> <li><p>在 <code>main.js</code> 中加载初始化</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token string">'./utils/dayjs'</span>
</code></pre></div></li> <li><p>使用过滤器</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> 日期数据 <span class="token operator">|</span> relativeTime <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
</code></pre></div></li></ol></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/heima2020/assets/js/app.e2adc9d2.js" defer></script><script src="/heima2020/assets/js/2.7389c9d3.js" defer></script><script src="/heima2020/assets/js/12.3ea117b6.js" defer></script>
  </body>
</html>
